<template>
  <div class="des-box-border">
    <el-row class="des-box">
      <el-col :span="5" class="des-title">单号</el-col>
      <el-col :span="7" class="des-content">
        <el-link>{{ content.dh }}</el-link>
      </el-col>
      <el-col :span="3" class="des-title">金额</el-col>
      <el-col :span="4" class="des-content">{{ content.je }}</el-col>
      <el-col :span="5" class="des-title">结账</el-col>
      <el-col :span="5" class="des-title">客户编号</el-col>
      <el-col :span="7" class="des-content">{{ content.khbh }}</el-col>
      <el-col :span="3" class="des-title">欠款</el-col>
      <el-col :span="4" class="des-content">{{ content.qk }}</el-col>
      <el-col :span="5" class="des-content">{{ content.fkfs }}</el-col>
      <el-col :span="5" class="des-title">客户名</el-col>
      <el-col :span="19" class="des-content">{{ content.khname }}</el-col>
      <el-col :span="5" class="des-title">日期</el-col>
      <el-col :span="9" class="des-content">{{ content.rq }}</el-col>
      <el-col :span="3" class="des-title">毛利</el-col>
      <el-col :span="7" class="des-content">{{ content.ml }}</el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "list-content",
  props:{
    content: Object
  }
}
</script>

<style lang="scss" scoped>
.des-box-border {
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  //-moz-box-shadow:2px 2px 10px #06C;
  //-webkit-box-shadow:2px 2px 10px #06C;
  //box-shadow:0 2px 4px #06C, 0 0 6px #06C;
}

.des-box {
  border-top: 1px solid #0766bd;
  border-left: 1px solid #0766bd;
  border-radius: 10px;
}

.des-title {
  color: white;
  height: 25px;
  background-color: #6385fa;
  display: flex;
  align-items: center;
  padding-left: 10px;
  border-bottom: 1px solid #0766bd;
  border-right: 1px solid #0766bd;
}

.des-title:first-child {
  border-top-left-radius: 10px;
}

.des-title:nth-child(5) {
  border-top-right-radius: 10px;
}

.des-title:nth-child(13) {
  border-bottom-left-radius: 10px;
}

.des-content:nth-child(16) {
  border-bottom-right-radius: 10px;
}

.des-content {
  height: 25px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  border-bottom: 1px solid #6595c7;
  border-right: 1px solid #6595c7;
}
</style>
